<!-- 历史浏览记录 -->

<template>
    <div>
      <div class="auction_title" style="position:relative">
        <h3 style="float:left">最近浏览</h3>
      </div>
  
      <div class="record_list_box">
        <div class="storey_list">
          <div class="storey_item" style="height: 274px;" v-for="item in getSave" :key="item.id">
            <RouterLink :to="`/detail/${item.id}`">
              <div class="storey_list_img">
                <img :src="item.cover" alt="">
              </div>
              <div class="storey_list_title">
                {{item.id}}
                【清光绪拾柒年 辛邓仲 友雲峰
                手抄订】【验方新编原刊信点牛痘说....等等.】4厚册全。是书；内有版画，纸张薄如蝉翼、版面整洁字大醒目、内附图解便后人易学易懂。望学者宝之。行书娴熟流畅，均非一般俗手可谓。
                阅着朱墨批点 非是一般庸手可为。品相如图。
              </div>
            </RouterLink>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  interface dataType{
    id:number
    cover:string

  }
  export default defineComponent({
    data() {
      return {
        getSave: [] as Array<dataType>
      }
    },
    mounted() {
      this.getSave = JSON.parse(localStorage.getItem('historyData') as string);
      // let newlist = getData.split(';')
      // for (let i = 0; i < getData.length - 1; i++) {
      //   this.getSave.push(JSON.parse(newlist[i]))
      // }
      // console.log(this.getSave)
    }
  
  })
  </script>
  
  <style lang="scss" scoped>
  .auction_title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #404040;
    font-weight: 500;
    border-bottom: 1px solid #e9e9e9;
  
    h3 {
      padding-left: 40px;
      margin: 0px;
    }
  }
  
  .record_list_box {
    width: 1200px;
    border: 1px solid #e9e9e9;
    margin: 20px auto 0;
    text-align: justify;
  }
  
  .storey_list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 20px;
    word-break: break-all;
    text-align: justify;
    text-justify: inter-ideograph;
  
    .storey_item {
      margin-left: 27px;
    }
  
    .storey_list_img {
      width: 208px;
      height: 208px;
      background: #f6f6f6;
      text-align: center;
      line-height: 208px;
      font-size: 0;
      overflow: hidden;
  
      img {
        width: 100%;
        height: auto;
      }
    }
  
    .storey_list_title {
      width: 192px;
      font-size: 14px;
      color: #333;
      line-height: 22px;
      margin: 4px auto 0;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  </style>